//Component1.jsx
import React from 'react';
import axios from 'axios';
import echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import {Title,getUrl} from '../mixin'


class EchartsLine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      xAxisData: ['', '12-01', '12-02', '12-03', '12-04', '12-05', ''],
      dataList: [15, 7, 28, 8, 9, 23, 13],
      active: true,
      option: {}
    }
  }

  componentDidMount() {
    this.changeEchartsLine()
  }

  changeEchartsLine = (type = '0') => {
    this.setState({
      active: type === '0' ? true : false
    })
    axios.get('/api/visualData/linechart', {
      params: {
        id: getUrl(),
        type: type,
      }
    }).then((res) => {
      this.setState({
        xAxisData: res.data.data.map(value => type==='0'?value.time.substring(11):value.time)
      })
      this.setState({
        dataList: res.data.data.map(value => value.doc_count)
      })
      // this.setState({
      //   xAxisData: [43, 21, 12, 15, 8, 30, 43]
      // })
      // this.setState({
      //   dataList: [15, 21, 12, 15, 8, 30, 13]
      // })
      this.initCharts(this.state.xAxisData, this.state.dataList)
    }).catch(err => console.log(err))
  };

  initCharts = (xAxisData, dateList) => {
    this.setState({
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: "#3d4155",
              width: 2
            },
            label: {
              show: false,
            }
          },
          formatter: function (params) {
            return "<span style='position:relative;top:-4px;color: #00bcff;font-size: 16px;'>舆情总数</span><span style='color: #fff;font-size: 24px;margin-left: 15px;'>" + params[0].value + "</span>";
          },
          confine: true,
          backgroundColor: '#2e314a',
          padding: 10,
          position: function (point, params, dom, rect, size) {
            // 固定在顶部
            return [point[0], '10%'];
          }
        },
        grid: {
          left: 70,
          right: 40,
          top: 50,
          bottom: 60
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: '#224b84',
              width: 2
            }
          },
          axisTick: { //刻度线
            show: false,
          },
          axisLabel: { //刻度线标签
            margin: 17,
            fontSize: 14,
            color: '#bbc6d8',
          }
        },
        yAxis: {
          type: 'value',
          // min: 0,
          // max: 31,
          // interval: 15,
          // data:[0,15,30],
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#224b84',
              width: 2
            }
          },
          axisTick: { //刻度线
            show: false,
          },
          axisLabel: { //刻度线标签
            color: '#bbc6d8',
            margin: 12,
            fontSize: 16,
            showMaxLabel: false,
          }
        },
        series: [{
          name: '',
          type: 'line',
          symbol: 'circle',
          symbolSize: 6,
          showSymbol: true,
          itemStyle: {
            normal: {
              color: '#0b182f',
              borderColor: '#1b73c9',
              borderWidth: 2,
            },
            emphasis: {
              color: 'rgba(255,255,255,0)',
              borderColor: 'rgba(255,255,255,1)',
              borderWidth: 5,
              shadowColor: 'rgba(255,255,255,0.8)',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 10
            }
          },
          lineStyle: {
            normal: {
              color: '#1b73c9',
              width: 2,
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(27,115,201,0.3)'
              }, {
                offset: 1,
                color: 'rgba(27,115,201,0)'
              }])
            },
          },
          data: dateList
        }]
      }
    })
  }

  render() {
    return (
      <div className="echartsline">
        <Title name="舆情监测趋势" el="Monitoring trend"/>
        <ul className="date">
          <li onClick={() => this.changeEchartsLine('0')} className={this.state.active ? 'active' : ''}>今日</li>
          <li onClick={() => this.changeEchartsLine('1')} className={!this.state.active ? 'active' : ''}>本周</li>
        </ul>
        <ReactEcharts
          option={this.state.option}
          style={{height: '244px', width: '100%'}}
          className={'react_for_echarts'}
        />
      </div>
    )
  }
}

export default EchartsLine;
